<template>
	<el-dialog :visible.sync="dialogVisible" title="打印订单" width="960px" v-drag2anywhere>
		<div id="printTable">
			<div>
				<div style="padding:20px;">
					<div>订单编码:{{detail.gwsid}}</div>
					<el-form>
						<div style="text-align: center;margin: 30px 0px 40px">
							<span style="font-size: 1.5625rem;font-weight: bold; line-height:60px;">京东订单详情</span>
							<div style="text-align: center;">{{detail.supname}}</div>
						</div>
						<div class="title">基本信息</div>
						<table class="print-table">
							<tr>
								<td>下单时间:</td>
								<td> {{detail.orderdate}}</td>
								<td>京东订单号:</td>
								<td>{{detail.ordercode}}</td>
							</tr>
							<tr>
								<td>订单类型:</td>
								<td>{{detail.type==1? '京东自营':'京东慧采'}}</td>
								<td>订单总额(元):</td>
								<td>{{detail.amount}}</td>
							</tr>
							<tr>
								<td>折扣点位:</td>
								<td>{{detail.suprate}}%</td>
								<td>折扣总额(元):</td>
								<td>{{detail.supamount}}</td>
							</tr>
							<tr>
								<td>订单区域:</td>
								<td colspan="7" style="text-align: left;"> {{detail.region_values.join(" ")}}</td>
							</tr>
							<tr>
								<td>送货信息:</td>
								<td colspan="7" style="text-align: left;">{{detail.buyerinfo.buyer}}
									{{detail.buyerinfo.mobile}} {{detail.buyerinfo.address}}</td>
							</tr>
						</table>

						<div class="title">商品明细</div>

						<table class="print-table">
							<tr>
								<td width="40px">序号</td>
								<td>商品名称</td>
								<td width="80px">规格</td>
								<td width="50px">单位</td>
								<td width="50px">数量</td>
								<td width="90px">单价</td>
								<td width="90px">小计</td>
							</tr>
							<tr v-for="(item,index) in detail.goods">
								<td>{{index+1}}</td>
								<td>{{item.title}}</td>
								<td>{{item.model}}</td>
								<td>{{item.unit}}</td>
								<td>{{item.count}}</td>
								<td>{{item.price}}</td>
								<td>{{item.total}}</td>
							</tr>
							<tr>
								<td colspan="5"></td>
								<td>合计</td>
								<td>{{detail.amount}}</td>
							</tr>
						</table>
					</el-form>
				</div>
			</div>

		</div>
		<div style="text-align: center;">
			<el-button @click="bindPrint" type="primary" size="medium">打印</el-button>
		</div>

	</el-dialog>
</template>

<script>
	export default {
		data() {
			return {
				memo:'',
				detail: {
					buyerinfo: {
						buyer: '',
						mobile: '',
						address: ''
					},
					region_values:[]
				},
				activeName: 'order',
				dialogVisible: false,
			}
		},
		methods: {
			init(data) {
				this.detail = data;
			},
			bindPrint() {
				printJS({
					printable: "printTable",
					type: 'html',
					header: null,
					targetStyles: ['*'],
					style: "@page {margin:0 10mm}"
				})
			}
		}
	}
</script>

<style scoped>
  .contentline{
      min-width: 200px;
      border-bottom: 1px solid #333;
      display: inline-block;
      text-align: center;
      padding: 0 10px;
  }


	.print-table {
		width: 100%;
		border-spacing: 0;
		text-align: center;
		border-top: 1px solid #000000;
		border-left: 1px solid #000000;
	}

	.print-table th {
		padding: 10px;
		border-right: 1px solid #000000;
		border-bottom: 1px solid #000000;
	}

	.print-table td {
		padding: 10px;
		border-right: 1px solid #000000;
		border-bottom: 1px solid #000000;
	}

	.title {
		position: relative;
		padding-left: 10px;
		margin-top: 20px;
		margin-bottom: 15px;
		font-size: 14px;
		color: #000;
		font-weight: 700;
	}

	.title:before {
		content: "";
		position: absolute;
		top: 4px;
		left: 0;
		width: 5px;
		height: 65%;
		background-color: #249af3;
	}
</style>
